﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>投票结果图表</title>
    <link rel="stylesheet" href="css/vote.css">
</head>

<body>

<h1>投票结果图表</h1>

<div class="skillbar clearfix " data-percent="20%">
    <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
    <div class="skillbar-bar" style="background: #e67e22;"></div>
    <div class="skill-bar-percent">20%</div>
</div>

<div class="skillbar clearfix " data-percent="25%">
    <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span></div>
    <div class="skillbar-bar" style="background: #3498db;"></div>
    <div class="skill-bar-percent">25%</div>
</div>

<div class="skillbar clearfix " data-percent="50%">
    <div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
    <div class="skillbar-bar" style="background: #2c3e50;"></div>
    <div class="skill-bar-percent">50%</div>
</div>

<div class="skillbar clearfix " data-percent="40%">
    <div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
    <div class="skillbar-bar" style="background: #5a68a5;"></div>
    <div class="skill-bar-percent">40%</div>
</div>

<div class="skillbar clearfix " data-percent="75%">
    <div class="skillbar-title" style="background: #333333;"><span>Wordpress</span></div>
    <div class="skillbar-bar" style="background: #525252;"></div>
    <div class="skill-bar-percent">75%</div>
</div>

<div class="skillbar clearfix " data-percent="100%">
    <div class="skillbar-title" style="background: #27ae60;"><span>SEO</span></div>
    <div class="skillbar-bar" style="background: #2ecc71;"></div>
    <div class="skill-bar-percent">100%</div>
</div>

<div class="skillbar clearfix " data-percent="70%">
    <div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span></div>
    <div class="skillbar-bar" style="background: #4288d0;"></div>
    <div class="skill-bar-percent">70%</div>
</div>

<script src='js/jquery.min.js'></script>
<script>
    $(function(){
        jQuery('.skillbar').each(function(){
            jQuery(this).find('.skillbar-bar').animate({
                width:jQuery(this).attr('data-percent')
            },6000);
        });
    });
</script>

</body>
</html>